<template>
	<view class="register-box">
	    <view class="top-part">
	        <image src="http://aliyun.oss.zxgyzj.com/big_img/fill-phone-img.jpg" class="logo"></image>
	    </view>
	    <view class="middle-part">
	        <view class="form-box">
	            <view class="form-item">
	                <view class="left-part">手机号</view>
	                <view class="middle-part">
	                    <input type="number" placeholder="请输入手机号" @input="bindInputPhone" focus='true'></input>
	                </view>
	            </view>
	        </view>
	        <view class="btn-container">
	            <button class="row-btn-primary btn-theme" @tap="register">确认提交</button>
	        </view>
	    </view>
	</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		data(){
			return{
				phone:''
			}
		},
		onLoad:function(options){
			 const url = 'http://aliyun.oss.zxgyzj.com/video/02.mp3'
			 gyzjModel.prototype.musicPlay(url)
		},
		onHide: function (options) {
		    gyzjModel.prototype.musicPause();
		},    
		//查看视频
		  goVideo: function () {
		    uni.navigateTo({
		      url: '../../order-lists/order-detail/video/video',
		    })
		  },
		methods:{
			 //校验
			  validation: function(postData) {
			    if (!/^1[3456789][0-9]{9}$/.test(postData.mobile)) {
			      return "请输入正确的手机号"
			    } else {
			      return true;
			    }
			  },
			/*綁定手機號碼的操作*/
			register: function() {
				let arr=this.main_getGlobal();
			    uni.showLoading({
			      title: '绑定中',
			      mask: true,
			    })
			    let postData = {
			      mobile: this.phone,
			      // inviteCode: app.globalData.inviteCode,
			    };
			    let errorMsg = this.validation(postData);
				console.log('errorMsg的值',errorMsg);
			    if (errorMsg !== true) {
			      uni.hideLoading();
			      uni.showToast({
			        title: errorMsg,
			        icon: "none",
			      })
			      return;
			    }
			    gyzjModel.prototype.musicPause(); //关闭音乐
			    this.updataUserInfo(arr.token,arr.type,postData);
			  },
			  /*更新用戶數據*/
			  updataUserInfo: function(token,type,postData) {
			      gyzjModel.prototype.updataUserInfo(token,postData,type).then(data => {
			        switch (data.code) {
			          case 1:
			              uni.hideLoading();
						  /*設置全局手機號*/
			              app.globalData.userInfo['mobile'] = postData['mobile'];
			              uni.showModal({
			                  content: '提交成功',
			                  showCancel: false,
			                  confirmColor: '#f94c48',
			                  success: res => {
			                    uni.redirectTo({
			                        url: '/pages/vip-info/vip-info?fillPhone=true',
			                    })
			                  }
			              })
			              break;
			          default:
			            uni.hideLoading();
			            uni.showToast({
			              title: data.message,
			              icon: 'none'
			            })
			            break;
			        }
			      })
			    },
			/*获取手机号码*/
		  bindInputPhone: function(e) {
			this.phone=e.detail.value;
		  },
			  
		},
	}
</script>

<style>
	.btn-theme {
		background-color: #f94c48;
		color: #fff;
	}

	.video {
	  width: 100%;
	  height: 140rpx;
	}
	.video > image {
	  width: 100%;
	  height: 100%;
	}
	
	.publicity {
	  padding: 10rpx 20rpx 30rpx;
	  background-color: #666;
	}
	
	.publicity-main {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
	  padding: 10rpx 0;
	}
	.color-666 {
	  font-size: 40rpx;
	  font-weight: 600;
	}
	.color-red {
	  color: #f94c48;
	  font-size: 38rpx;
	  font-weight: 600;
	}
	
	.row-btn-primary {
	    color: white;
	    text-align: center;
	    border-radius: 8rpx;
	}
	
	.btn-container {
	    margin-top: 50rpx;
	    padding: 0 30rpx;
	}
	
	.register-box {
	    background: white;
	    padding-bottom: 60rpx;
	}
	
	.top-part {
	    text-align: center;
	}
	
	.top-part>.logo {
	    display: block;
	    width: 750rpx;
	    height: 363rpx;
	}
	
	.middle-part {
	}
	
	.form-box {
	    border-top: 2rpx solid #eee;
	}
	
	.form-item {
	    padding: 20rpx 20rpx;
	    display: flex;
	    border-bottom: 2rpx solid #eee;
	    align-items: center;
	}
	
	.form-item>.left-part {
	    flex-basis: 160rpx;
	}
	
	.form-item>.middle-part {
	    flex: 1;
	    padding-left: 20rpx;
	}
	
	.form-item>.right-part {
	    flex-basis: 200rpx;
	}
	
	.form-item>.right-part>button {
	    width: 200rpx;
	}

</style>
